import React from 'react'
import { IconDownCircle } from '@arco-design/web-react/icon'
import '@arco-design/web-react/dist/css/arco.css'
import FeedItem from './FeedItem'

function FeedList(props) {
  const { feedList } = props
  const [showAll, setShowAll] = React.useState(true)

  return (
    <div key={feedList.period}>
      <div className='feed-list-header' onClick={() => setShowAll(!showAll)}>
        <div className='feed-list-header-text cant-drag-and-select'>{feedList.period}</div>
        <div className='feed-list-header-icon-wrapper '>
          <IconDownCircle
            className='feed-list-header-icon'
            style={{
              fontSize: 16,
              transform: showAll ? 'rotate(0deg)' : 'rotate(-180deg)',
              transition: 'all 0.2s',
            }}
          />
        </div>
      </div>
      {showAll && feedList.feedItems.map((feedItem) => <FeedItem key={feedItem.id} feedItem={feedItem} />)}
    </div>
  )
}

export default FeedList
